// pages/goos_detail/index.js
/*
  1、点击轮播图，预览大图
    1、给轮播图绑定点击事件
    2、调用小程序的api previewImage
  2、点击，加入购物车
    1、绑定点击事件
    2、获取缓存中的购物车数据 数组格式
    3、先判断，当前商品是否已经存在购物车了。
    4、已经存在，修改商品数据，执行购物数量++，重新把购物车数组 填充回缓存中
    5、不存在购物车中，直接给购物车数组添加一个新元素，新元素带上购买数量属性，num。
       重新把购物车数组，填充回缓存中。
    6、弹出提示
*/
import { request } from "../../request/index.js"
Page({
  data: {
    goodsObj:{}
  },
  // 定义一个全局的商品对象
  GoodsInfo:{},
  onLoad: function (options) {
    // 拿到页面传过来的goods_id
    const {goods_id} = options
    this.getGoodsDetail(goods_id)
  },
  // 获取商品的详情数据
  getGoodsDetail(goods_id){
    request({url:'/goods/detail',data:{goods_id}})
    .then(res=>{
      this.GoodsInfo=res
      // 从后台接口拿到数据的数量是22个，但是我们只要其中的4个。
      // 所以我们需要优化一下，给当前的goodsObj赋值的时候，没用的就不赋值了
      this.setData({
        goodsObj:{
          goods_name:res.goods_name, // 商品名
          goods_price:res.goods_price, // 商品价格
          // 这里因为iphone手机不支持图片的.webp格式，所以自己改
          // 确保后台存在后缀为1.webp格式 => 1.jgp
          // 正常的做法是找后台沟通，让他们改图片格式。
          goods_introduce:res.goods_introduce.replace(/\.webp/g,'.jpg'), // 商品图文。写正则，将webp换为jpg格式
          pics:res.pics // 商品轮播图
        }
      })
      // console.log(this.data.goodsObj);
    })
  },

  // 点击轮播图，放大预览
  handlePreviewImage(e){
    // 声明一个新数组(urls)等于拿到的数据的图片的路径之后在用.map数组的方法循环拿
    // 到里面的每一项（v代表每一项）中的pics_mid。所以，urls这个数组里面的每个元素就是没张图片的地址。
    const urls = this.GoodsInfo.pics.map(v=>v.pics_mid)
    // 接受传过来的图片的url，这是使用自定义事件。
    const current = e.currentTarget.dataset.url
    wx.previewImage({
      current: current, // 点击的那一项
      urls: urls, // 轮播相册的数组
    });
  },

  // 2、点击添加到购物车,顶部有思路要求。
  handleCartAdd(){
    // 1、获取缓存中的购物车数组。
    let cart = wx.getStorageSync("cart")||[]; 
    // 2、判断商品对象是否存在于购物车数组。
    let index = cart.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
    if(index === -1){
      // 3、不存在,第一次添加。
      this.GoodsInfo.num = 1;
      cart.push(this.GoodsInfo);
    }else{
      // 4、已经存在购物车数据 执行num ++
      cart[index].num++;
    }
    // 5、把购物车重新添加回缓存中
    wx.setStorageSync("cart",cart);
    // 6、弹窗提示
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      // true ,防止用户手抖，疯狂点击按钮。
      mask: true,
    });
  },

})